<%--
  User: vplociennik
  Date: 11/27/13
  Time: 3:34 AM
--%>
<%@include file="head.jsp" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<div class="col-xs-12 col-sm-9">
    <div class="panel panel-primary">
        <div class="panel-heading">Chart</div>
        <div class="panel-body">
            <ul id="log">
                <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
            </ul>
        </div>
    </div>
</div>
<!--/span-->


</div><!--/row-->

<hr>

<footer>
    <p>&copy; SJSU - CMPE283 - 2013</p>
</footer>

</div><!--/.container-->


<script src="${pageContext.request.contextPath}/js/jquery-2.0.3.js"></script>
<script src="${pageContext.request.contextPath}/js/bootstrap.js"></script>
<script src="${pageContext.request.contextPath}/js/highcharts.js"></script>
<script>

    $(function () {
        $('#container').highcharts({
            title: {
                text: 'Network',
                x: -20 //center
            },
            subtitle: {
                text: 'chart',
                x: -20
            },
            xAxis: {
                categories: ${axis.x}
            },
            yAxis: {
                title: {
                    text: 'Network Rx'
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            },
            tooltip: {
                valueSuffix: ''
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'middle',
                borderWidth: 0
            },
            series: ${axis.y}

        });
    });

</script>


</body>
</html>